import { onMounted, onUnmounted, ref } from "vue"

export function useWidth() {
// 以下逻辑会被复用 所以封装出去 组合式api  composable
  const width = ref(0) // 永远只会拿到项目初次运行时的屏幕宽度
  const changeSize = () => {
    // console.log('尺寸变了')
    width.value = window.innerWidth
  }

  onMounted(() => {
    changeSize() // 组件挂载后 先获取一次初值
    // 屏幕尺寸变化时  width要更新
    window.addEventListener('resize', changeSize)
  })

  // 卸载页面需要移除监听器
  onUnmounted(() => {
    window.removeEventListener('resize', changeSize)
  })
return { width ,changeSize}
}